import MainView from "@/components/MainView";
import { Feather } from "@expo/vector-icons";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { useColorScheme } from "nativewind";
import { colors } from "@/constants/colors";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { getGames } from "@/api/data/get-games";
import { Item } from "@/components/Item";

export default function HomeScreen() {
  const { colorScheme, toggleColorScheme } = useColorScheme()
  const [listView, setListView] = useState('list')

  const handleListView = () => {
    setListView(listView === 'list' ? 'grid' : 'list')
  }

  const { data, isPending, error } = useQuery({
    queryKey: ['games'],
    queryFn: getGames
  })

  const numColumns = listView === 'list' ? 1 : 2
  const key = `flatlist-${numColumns}`

  return (
    <MainView>
      <View className="header flex flex-row items-center justify-between">
        <Text className="text-3xl dark:text-neutral-100 w-40">F2P Games</Text>
        <Feather
          name={colorScheme === 'dark' ? 'moon' : 'sun'}
          size={28}
          color={colorScheme === 'dark' ? colors.gray : colors.yellow}
          onPress={toggleColorScheme}
        />
      </View>
      <View className="h-12">
        {/* <FlatList

        /> */}
      </View>
      <View className="flex flex-row justify-end items-center mb-4">
        <Feather
          name={listView === 'list' ? 'list' : 'grid'}
          size={24}
          color={colors.gray}
          onPress={handleListView}
        />
      </View>
      {isPending && <ActivityIndicator />}
      {!isPending &&
        <FlatList
          key={key}
          data={data}
          className={'grid'}
          numColumns={numColumns}
          keyExtractor={item => item.id}
          renderItem={({ item }) =>
            <Item
              key={item.id}
              title={item.title}
              thumbnailUrl={item.thumbnail}
              genre={item.genre}
              platform={item.platform}
              developer={item.developer}
              publisher={item.publisher}
              releaseDate={item.release_date}
            />
          }
          contentContainerStyle={{ gap: 24 }}
        />
      }
    </MainView>
  )
}